<template>
  <ContentWrap>
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="120px"
      v-loading="formLoading"
      inline
    >

    <div class="card-header">
          <span class="title">基本信息</span>
          <div class="right-button">
            <el-button type="primary" @click="handleSubmit">保存</el-button>
            <!-- <el-button type="primary" @click="handleSave">返回</el-button> -->
            <el-button @click="goBack">返回</el-button>
          </div>
        </div>

    <!-- <el-form-item label="上层组织机构" prop="parentOrgId">
        <el-select v-model="formData.parentOrgId" placeholder="请选择上层组织机构" clearable>
          <el-option label="请选择字典生成" value="" />
        </el-select>
      </el-form-item> -->

<el-row :gutter="24">
  <el-col :span="8">
    <el-form-item label="上级组织机构" prop="parentId" class="!w100">
        <el-tree-select
        v-if="formData.parentI != 0"
              v-model="formData.parentId"
              :data="treeList"
              clearable
              check-strictly
             clss="!w-240px"
              :props="defaultProps"
              @node-click="handleChangeTree"
            />
      </el-form-item>
  </el-col>


  <el-col :span="8">
    <el-form-item label="组织机构名称" prop="name" class="!w100">
        <el-input  v-model="formData.name" placeholder="请输入组织机构名称" />
      </el-form-item>
  </el-col>


<el-col :span="8">
  <el-form-item label="路径全称" prop="pathAllName" class="!w100">
        <el-input disabled v-model="formData.pathAllName" placeholder="请输入路径全称" />
      </el-form-item>
</el-col>
</el-row>



<el-row :gutter="24">

  <el-col :span="8">


      <el-form-item label="简称" prop="shortName" class="!w100">
        <el-input v-model="formData.shortName" placeholder="请输入简称" />
      </el-form-item>

</el-col>


<el-col :span="8">
  <el-form-item label="排序" prop="sort" class="!w100">
        <el-input v-model="formData.sort" placeholder="请输入排序" />
      </el-form-item>
  </el-col>


  <el-col :span="8">
      
    <el-form-item label="组织机构级别" prop="levelValue" class="!w100">
        <el-select clearable v-model="formData.levelValue" placeholder="请选择组织机构级别" >
          <el-option label="集团" :value="0" />
          <el-option label="板块" :value="1" />
          <el-option label="企业" :value="2" />
          <el-option label="二级单位" :value="3" />
          <el-option label="基层单位" :value="4" />
        </el-select>
      </el-form-item>
  </el-col>
</el-row>


      <!-- <el-form-item label="排序" prop="sort">
        <el-input v-model="formData.sort" placeholder="请输入简称" />
      </el-form-item> -->


      <el-form-item label="状态" prop="status" class="!w100">
        <el-select clearable v-model="formData.status" placeholder="请选择状态" >
          <el-option label="活动" :value="0" />
          <el-option label="不活动" :value="1" />
        </el-select>
      </el-form-item>


    </el-form>
  </ContentWrap>
</template>

<script setup lang="ts">
import { firstPartyApi } from '@/api/qis/firstParty'
import { ProjectManagemenrApi } from '@/api/qis/projectmanagemenr'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { dealTreeAddDisable } from '@/utils/tree-date-deal'

const router = useRouter()
const formRef = ref()
const formLoading = ref(false)

let formData = reactive({
  parentId:undefined,
  status:0
})

const formRules = reactive({
  name: [{ required: true, message: '请输入组织机构名称', trigger: 'blur' },{max:50,message: '长度不能超过50个字符', trigger: 'blur' },{ pattern: /^[\u4e00-\u9fa5]+$/, message: '只能输入汉字', trigger: 'blur'}],
  sort: [{ required: true, message: '请输入排序', trigger: 'blur' },{max:10, message: '长度不能超过10个字符', trigger: 'blur' },{ pattern: /^\d+$/, message: '只能输入数字', trigger: 'blur' }],
  
  // pathAllName: [{ required: true, message: '请输入路径全称', trigger: 'blur' }],
  levelValue: [{ required: true, message: '请选择组织机构级别', trigger: 'blur' }],
  shortName: [{ required: true, message: '请输入简称', trigger: 'blur' },{max:50, message: '长度不能超过50个字符', trigger: 'blur' },  {
      validator: (rule, value, callback) => {
        // 正则表达式，用于匹配是否全是汉字
        const reg = /^[\u4e00-\u9fa5]+$/;
        if (value &&!reg.test(value)) {
          callback(new Error('简称必须为汉字'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }],
  parentOrgId: [{ required: false, message: '请选择上层组织机构', trigger: 'change' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }]
})

const treeList = ref([])


const getTreeList = async () => {
  const res = await ProjectManagemenrApi.getTreeListApi()
  console.log(res)
  treeList.value = dealTreeAddDisable(res, route.query.id)
}

const submitForm = async () => {
  if (!formRef.value) return
  await formRef.value.validate(async (valid: boolean) => {
    if (valid) {
      formLoading.value = true
      try {
        // TODO: 调用API保存数据
        // await YourApi.create(formData)
        // message.success('新增成功')
        goBack()
      } finally {
        formLoading.value = false
      }
    }
  })
}

const defaultProps = {
  children: 'children',
  label: 'name',
  value:'id'
}

const route = useRoute()
const message = useMessage()
const handleSubmit = async ()=>{
  
if(!formRef.value) return 
console.log(formData,'formData')

await formRef.value.validate(async (valid)=>{
  if(valid){
  if(route.query.id){
    await firstPartyApi.updatefirstParty({...formData, parentId: formData.parentId || 0  })
  message.success('修改成功')

  }else{
    console.log(formData)
    await firstPartyApi.createfirstParty({...formData, parentId: formData.parentId || 0  })
  message.success('保存成功')

  }
  goBack()
  }
})

}


const getDetail = async ()=>{
  console.log(route.query.id,'route.query.id')

  if(route.query.id){
    console.log(route.query.id,'route.query.id')
    const res = await firstPartyApi.getfirstParty(route.query.id)
    formData = Object.assign(formData,res)
    formData.sort = String(formData.sort)
  if(!formData.parentId){
    formData.parentId = undefined
  }
    console.log(formData,'formData')
  }
}


const handleChangeTree = (value)=>{
  console.log(value,'value')
  formData.firstpartyName = value.name
}

const goBack = () => {
  router.back()
}

onMounted(()=>{
  getDetail()
  getTreeList()

  if(route.query.id){
    route.meta.title = '编辑甲方单位管理'
  }else {
    route.meta.title = '新增甲方单位管理'
  }
})
</script> 


<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0; 

  .title {
    font-size: 16px;
    font-weight: bold;
  }

  .right-button {
    display: flex;
    gap: 10px;
  }
}
</style>